Merge branch 'master' of https://github.com/coinos/coinos-ui into notificationsnotifications

14 files changed, 454 insertions, 302 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index dfa25b78..133930b1 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -4,7 +4,6 @@
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { sign, send } from '$lib/nostr';
-	import { v4 } from 'uuid';
 
 	export let data;
 	let events, user, subject, src, text;
@@ -111,7 +110,7 @@
 				{/if}
 
 				<div class="w-full flex">
-					<a href={`/${subject.pubkey}/messages`} class="mx-auto">
+					<a href={`/${subject.username}/messages`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
 								<Icon icon="support" style="mr-2 my-auto" />
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.js b/src/routes/(app)/[username]/(profile)/+page.server.js
index c68cfecc..d6cf3984 100644
--- a/src/routes/(app)/[username]/(profile)/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/+page.server.js
@@ -1,22 +1,35 @@
 import { auth, get } from '$lib/utils';
 
 export async function load({ cookies, params, parent, url }) {
-	let { subject } = await parent();
+	let { user, subject } = await parent();
 	let { pubkey } = subject;
+	let { since = 0 } = params;
 
-	let events = [];
+	let messages, invoices, sent, received;
+	messages = invoices = sent = received = [];
+
+	if (user) {
+		try {
+			messages = await get(`/${user.pubkey}/${since}/messages`);
+			messages = messages.sort((a, b) => b.created_at - a.created_at);
+		} catch (e) {
+			console.log(`failed to fetch nostr messages`, e);
+		}
+
+		({ invoices, sent, received } = await get('/requests', auth(cookies)));
+	}
+
+	let notes = [];
 
 	try {
-		events = await get(`/${pubkey}/notes`);
+		notes = await get(`/${pubkey}/notes`);
 	} catch (e) {
-		console.log(`failed to fetch nostr events for ${pubkey}`, e);
+		console.log(`failed to fetch nostr notes for ${pubkey}`, e);
 	}
 
-	events.map((e) => {
+	notes.map((e) => {
 		e.seen = e.created_at;
 	});
 
-	let { invoices, sent, received } = await get('/requests', auth(cookies));
-
-	return { invoices, events, sent, received };
+	return { invoices, messages, notes, sent, received };
 }
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index baab8ba1..168556e4 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,76 +1,197 @@
 <script>
-	import { Avatar, Balance, Feed } from '$comp';
+	import { onMount } from 'svelte';
+	import { Icon, Avatar, Balance, Feed } from '$comp';
 	import { t } from '$lib/translations';
 	import { f, sat, sats } from '$lib/utils';
+	import { sign, send, encrypt, decrypt } from '$lib/nostr';
+	import { event as e, password } from '$lib/store';
+	import { browser } from '$app/environment';
 
 	export let data;
-	let { events, invoices, sent, received, subject, user } = data;
-	console.log(invoices);
+	let { messages, notes, invoices, sent, received, subject, user } = data;
+	$: refresh(data);
+	let refresh = (d) => ({ messages, notes, invoices, sent, received, subject, user } = d);
+
+	let keys = new Set();
+	let latest = [];
+	let i = 0;
+	let ready;
+
+	e.subscribe(async (event) => {
+		if (!(event && ready)) return;
+		if (event.recipient.id === user?.id && !~latest.findIndex((m) => m.id === event.id)) {
+			event.content = await decrypt({ event, user });
+
+			let i = latest.findIndex((m) => m.pubkey === event.pubkey);
+			let popped;
+			if (~i) popped = latest.splice(i, 1);
+			else popped = latest.pop();
+
+			latest.unshift(event);
+			latest = latest;
+		}
+	});
+
+	$: initialize($password);
+	let initialize = async (p) => {
+		ready = false;
+		if (!p) return;
+		while (latest.length < 3 && i < messages.length) {
+			let event = messages[i];
+			let k = event.author.id === user.id ? event.recipient.pubkey : event.author.pubkey;
+			if (!keys.has(k)) {
+				keys.add(k);
+				event.content = await decrypt({ event, user });
+				if (event.content) latest.push(event);
+			}
+			i++;
+		}
+
+		latest = latest;
+		ready = true;
+	};
 </script>
 
-<div class="flex justify-center lg:justify-start">
+<div class="space-y-8">
 	{#if user?.id === subject.id}
-		<Balance {user} />
-	{/if}
-</div>
+		<div>
+			<div class="flex justify-center lg:justify-start">
+				<Balance {user} />
+			</div>
+			{#if !user.balance}
+				<div class="space-y-8 mt-8">
+					<p class="text-secondary text-lg">
+						Welcome! Your account balance is empty. You can start by making a deposit or by asking
+						someone to pay you.
+					</p>
 
-<div>
-	{#each invoices as { amount, currency, rate, request: { requester, recipient }, hash }}
-		{@const requested = user.username === requester?.username}
-		<a href={`/${recipient.username}/invoice/${hash}` + (requested ? '/tip' : '')}>
-			<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
-				<div class="flex gap-2">
-					<div>
-						{#if requested}
-							<div class="flex">
-								<Avatar user={recipient} size={20} />
-								<div class="my-auto text-left">
-									<p class="text-secondary">{$t('payments.invoiceFrom')}</p>
-									<p class="ml-1 text-lg break-words">{recipient.username}</p>
+					<div class="flex gap-4 justify-center w-full">
+						<a href={`/${user.username}/receive`}>
+							<button
+								class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
+							>
+								<div class="mx-auto flex">
+									<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
+									<div class="my-auto mt-1">Request Payment</div>
 								</div>
+							</button>
+						</a>
+
+						{#if user.eligible}
+							<a href={`/buy`}>
+								<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+									<div class="mx-auto flex">
+										<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
+
+										<img
+											src="/images/bitcoin.svg"
+											class="w-8 border-4 border-transparent mr-2"
+											alt="Bitcoin"
+										/>
+										<div class="my-auto mt-1">Buy Bitcoin</div>
+									</div>
+								</button>
+							</a>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	{#if invoices.length}
+		<div>
+			<h1 class="text-secondary text-xl">Invoices</h1>
+			{#each invoices as { amount, currency, rate, request: { requester, recipient }, hash }}
+				{@const requested = user.username === requester?.username}
+				<a href={`/${recipient.username}/invoice/${hash}` + (requested ? '/tip' : '')}>
+					<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+						<div class="flex gap-2">
+							<div>
+								{#if requested}
+									<div class="flex">
+										<Avatar user={recipient} size={20} />
+										<div class="my-auto text-left">
+											<p class="text-secondary">{$t('payments.invoiceFrom')}</p>
+											<p class="ml-1 text-lg break-words">{recipient.username}</p>
+										</div>
+									</div>
+								{:else}
+									<div class="flex">
+										<Avatar user={requester} size={20} />
+										<div class="my-auto text-left">
+											<p class="text-secondary">{$t('payments.awaiting')}</p>
+											<p class="ml-1 text-lg break-words">{requester.username}</p>
+										</div>
+									</div>
+								{/if}
 							</div>
-						{:else}
-							<div class="flex">
-								<Avatar user={requester} size={20} />
-								<div class="my-auto text-left">
-									<p class="text-secondary">{$t('payments.awaiting')}</p>
-									<p class="ml-1 text-lg break-words">{requester.username}</p>
+							<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+								<div class="font-bold">
+									{f(amount * (rate / sats), currency)}
 								</div>
+
+								<div class="text-secondary">{sat(amount)}</div>
 							</div>
-						{/if}
-					</div>
-					<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
-						<div class="font-bold">
-							{f(amount * (rate / sats), currency)}
 						</div>
-
-						<div class="text-secondary">{sat(amount)}</div>
 					</div>
-				</div>
-			</div>
-		</a>
-	{/each}
+				</a>
+			{/each}
+		</div>
+	{/if}
+	{#if received.length}
+		<div>
+			<h1 class="text-secondary text-xl">Requests</h1>
 
-	{#each received as { id, invoice, memo, requester: r }}
-		<a href={`/${user.username}/receive/${id}`}>
-			<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
-				<div class="flex">
-					<div>
+			{#each received as { id, invoice, memo, requester: r }}
+				<a href={`/${user.username}/receive/${id}`}>
+					<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
 						<div class="flex">
-							<Avatar user={r} size={20} />
-							<div class="my-auto text-left">
-								<p class="ml-1 text-lg break-words">{r.username}</p>
-								<p class="ml-1 text-secondary">{memo}</p>
+							<div>
+								<div class="flex">
+									<Avatar user={r} size={20} />
+									<div class="my-auto text-left">
+										<p class="ml-1 text-lg break-words">{r.username}</p>
+										<p class="ml-1 text-secondary">{memo}</p>
+									</div>
+								</div>
+							</div>
+							<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+								<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+									>Invoice</button
+								>
 							</div>
 						</div>
 					</div>
-					<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
-						<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
-							>Invoice</button
-						>
+				</a>
+			{/each}
+		</div>
+	{/if}
+
+	{#if latest.length && user?.id === subject.id}
+		<div class="relative">
+			{#each latest as { content, pubkey, author, recipient }}
+				{@const user = author.id === user.id ? recipient : author}
+				<a href={`/${user.username}/messages`}>
+					<div class="flex hover:bg-gray-100 p-4 rounded-2xl">
+						<div class="my-auto">
+							<Avatar {user} size={'20'} disabled={true} />
+						</div>
+						<div class="my-auto truncate">
+							<div class="my-auto ml-1 text-lg font-bold">{user.username}</div>
+							<div class="my-auto ml-1 text-secondary text-lg truncate">
+								{content}
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-		</a>
-	{/each}
+				</a>
+			{/each}
+		</div>
+	{/if}
 </div>
+
+<style>
+	h1 {
+		@apply mb-2;
+	}
+</style>
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.svelte b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
deleted file mode 100644
index db7b1ced..00000000
--- a/src/routes/(app)/[username]/(profile)/messages/+page.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script>
-	import { browser } from '$app/environment';
-	import { t } from '$lib/translations';
-	import { format, parseISO } from 'date-fns';
-	import { scale } from 'svelte/transition';
-	import { enhance } from '$app/forms';
-	import { Icon } from '$comp';
-	import { back, fail, focus } from '$lib/utils';
-	import { sign, send, encrypt, decrypt } from '$lib/nostr';
-	import { messages, password } from '$lib/store';
-	import { tick, onMount } from 'svelte';
-	import { calculateId } from 'nostr';
-
-	export let data;
-
-	let { newMessages, subject, user } = data;
-	let input, pane;
-
-	$: initialize($password);
-	let initialize = async (p) => {
-		if (!p) return;
-		$messages[user.pubkey] = $messages[user.pubkey] || {};
-		$messages[user.pubkey][subject.pubkey] = $messages[user.pubkey][subject.pubkey] || {};
-
-		for (let m of newMessages) {
-			if (!$messages[user.pubkey][subject.pubkey][m.id]) {
-				m.message = await decrypt({ event: m, user });
-				$messages[user.pubkey][subject.pubkey][m.id] = m;
-				tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-			}
-		}
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-	};
-
-	$: events =
-		($messages[user.pubkey] &&
-			$messages[user.pubkey][subject.pubkey] &&
-			Object.values($messages[user.pubkey][subject.pubkey]).sort(
-				(a, b) => a.created_at - b.created
-			)) ||
-		[];
-
-	let sent, submitting, message;
-	let submit = async () => {
-		submitting = true;
-
-		let event = {
-			pubkey: user.pubkey,
-			created_at: Math.floor(Date.now() / 1000),
-			kind: 4,
-			tags: [['p', subject.pubkey]]
-		};
-
-		event.message = message;
-		event.id = await calculateId(event);
-		$messages[user.pubkey][subject.pubkey][event.id] = event;
-		$messages = $messages;
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-
-		try {
-			event.content = await encrypt({ message, recipient: subject.pubkey, user });
-			await sign({ event, user });
-			await send(event);
-
-			sent = true;
-		} catch (e) {
-			fail('Failed to send message');
-			delete $messages[user.pubkey][subject.pubkey][event.id];
-			$messages = $messages;
-		}
-
-		message = '';
-		submitting = false;
-	};
-</script>
-
-<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
-		{$t('payments.sendMessage')}
-	</h1>
-
-	<div class="max-h-[calc(50vh)] overflow-y-scroll p-4" bind:this={pane}>
-		{#each events as data}
-			{@const ours = data.pubkey === user.pubkey}
-			{@const theirs = !ours}
-			<div class="rounded-2xl p-4 max-w-[300px] mb-1 text-md" class:ours class:theirs>
-				{#if data.message}
-					{data.message}
-				{:else}
-					-
-				{/if}
-			</div>
-			<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
-				{format(new Date(data.created_at * 1000), 'MMM d')},
-				{format(new Date(data.created_at * 1000), 'h:mm aa')}
-			</div>
-		{/each}
-	</div>
-
-	<form method="POST" class="space-y-5" on:submit|preventDefault={submit}>
-		<input type="hidden" name="requester_id" value={user.id} />
-		<input type="hidden" name="recipient" value={subject.username} />
-
-		<input
-			use:focus
-			name="message"
-			placeholder={$t('payments.sendMessage')}
-			class="w-full p-4 border rounded-xl"
-			bind:value={message}
-			bind:this={input}
-		/>
-	</form>
-</div>
-
-<style>
-	.ours {
-		@apply bg-gray-100 rounded-br-none ml-auto;
-	}
-
-	.theirs {
-		@apply bg-gray-200 rounded-bl-none;
-	}
-</style>
diff --git a/src/routes/(app)/[username]/(profile)/request/+page.server.js b/src/routes/(app)/[username]/(profile)/request/+page.server.js
index 2c1d6bde..e7ad6a8f 100644
--- a/src/routes/(app)/[username]/(profile)/request/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/request/+page.server.js
@@ -1,15 +1,15 @@
 import { redirect } from '@sveltejs/kit';
-import { auth, post } from '$lib/utils';
+import { fd, auth, post } from '$lib/utils';
 
 export const actions = {
 	create: async ({ cookies, params, request, url }) => {
-		let form = Object.fromEntries(await request.formData());
+		let form = await fd(request);
 		let { id, requester } = await post('/requests', form, auth(cookies));
 		throw redirect(307, `/${params.username}/request/${id}`);
 	},
 
 	delete: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData());
+		let form = await fd(request);
 		let r = await post('/requests/delete', form, auth(cookies));
 	}
 };
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index 499034e6..d8761ea9 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -7,7 +7,6 @@
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 	import { events } from '$lib/store';
-	import { v4 } from 'uuid';
 
 	export let data;
 	$: ({ invoices, requests } = data);
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index ad9721e7..fff2b22c 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -1,12 +1,13 @@
 <script>
+	import { enhance } from '$app/forms';
 	import { send } from '$lib/socket';
-	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
+	import { post, back, copy, f, get, types, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { last } from '$lib/store';
 	import { Avatar, Icon, Heart, Image } from '$comp';
 	import { t } from '$lib/translations';
-	import screenfull from 'screenfull';
+	import { goto, invalidate } from '$app/navigation';
 
 	export let data;
 
@@ -21,18 +22,19 @@
 		prompt,
 		text,
 		tip,
+		request_id,
 		user: { username, currency }
 	} = invoice;
 
 	let showQr = !amount;
 
-	let src = sm;
+	$: src = sm;
 
 	let qr;
 	let tipPercent = 0;
 
 	let refresh = (data) => {
-		({ invoice, id } = data);
+		({ invoice, id, user, sm, lg } = data);
 		({
 			amount,
 			hash,
@@ -64,31 +66,54 @@
 	$: link = type === 'bitcoin' ? text : `lightning:${text}`;
 	$: txt = type === 'bitcoin' ? hash : text;
 
-	let full;
-	let toggle = () => {
-		screenfull.toggle(qr);
-		full = !full;
-		if (full) src = lg;
-		else src = sm;
+	let toggleType = async () => {
+		invoice.type = invoice.type === types.lightning ? types.bitcoin : types.lightning;
+		({ hash } = await post(`/${username}/invoice`, {
+			invoice,
+			user: { username, currency }
+		}));
+
+		goto(`./${hash}`, { invalidateAll: true });
 	};
 </script>
 
 <div class="container mx-auto max-w-lg px-4 space-y-5">
-	<div class="relative flex">
-		<div class="flex mx-auto w-[360px] h-[360px]">
+	<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+			class:bg-black={type === types.lightning}
+			class:text-white={type === types.lightning}
+			on:click={toggleType}
+		>
+			⚡️ Lightning
+		</button>
+
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center "
+			class:bg-black={type === types.bitcoin}
+			class:text-white={type === types.bitcoin}
+			on:click={toggleType}
+		>
 			<img
-				{src}
-				class:p-4={full}
-				class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]"
-				bind:this={qr}
-				on:click={toggle}
-				on:keydown={toggle}
-				alt={txt}
+				src="/images/bitcoin.svg"
+				class="my-auto w-8 border-4 border-transparent"
+				alt="Bitcoin"
 			/>
-		</div>
-		<div
-			class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
-		/>
+			<div class="my-auto">Bitcoin</div>
+		</button>
+	</div>
+
+	<div>
+		<a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}>
+			<div class="relative flex">
+				<div class="flex mx-auto w-[360px] h-[360px]">
+					<img {src} class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" bind:this={qr} alt={txt} />
+				</div>
+				<div
+					class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
+				/>
+			</div>
+		</a>
 	</div>
 
 	{#if amount > 0}
@@ -115,9 +140,9 @@
 	{/if}
 
 	<div class="w-full flex justify-center">
-		<button class="flex rounded-full border py-2 px-5 hover:opacity-80" on:click={() => copy(txt)}>
+		<button class="flex rounded-full border py-3 px-5 hover:opacity-80" on:click={() => copy(txt)}>
 			<Icon icon="copy" style="mr-1" />
-			<div class="text-secondary">{txt.substr(0, 10)}..{txt.substr(-6)}</div></button
+			<div class="text-secondary">{txt.substr(0, 10)}...{txt.substr(-10)}</div></button
 		>
 	</div>
 </div>
diff --git a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
index 432b137a..3a281728 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
@@ -4,7 +4,7 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
-	import { f, s, sat, sats } from '$lib/utils';
+	import { fiat, f, s, sat, sats } from '$lib/utils';
 	import { goto } from '$app/navigation';
 
 	export let data;
@@ -12,10 +12,6 @@
 	$: data && ({ amount, currency, rate, received, pending, tip, user, id } = data.invoice);
 
 	toast.pop(0);
-
-	$: amountFiat = parseFloat((((received - tip) * rate) / sats).toFixed(2));
-	$: pendingFiat = parseFloat((((pending - tip) * rate) / sats).toFixed(2));
-	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
 </script>
 
 <div class="container px-4 text-center mx-auto">
@@ -25,15 +21,20 @@
 	{#if received}
 		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
 		<h2 class="text-2xl md:text-3xl font-semibold">
-			{f(amountFiat, currency)}
+			{f(fiat(received - tip, rate), currency)}
 			{#if tip}
-				+ {f(tipFiat, currency)}
+				<span class="text-lg">
+					+ {f(fiat(tip, rate), currency)}
+				</span>
 			{/if}
 		</h2>
 		<h3 class="text-secondary md:text-lg mb-6 mt-1">
-			{sat(received - tip)}
+			⚡️{s(received - tip)}
+
 			{#if tip}
-				+{sat(tip)}
+				<span class="text-lg">
+					+ ⚡️{s(tip)}
+				</span>
 			{/if}
 		</h3>
 	{/if}
@@ -41,15 +42,17 @@
 	{#if pending}
 		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
 		<h2 class="text-2xl md:text-3xl font-semibold">
-			{f(pendingFiat, currency)}
+			{f(fiat(pending, rate), currency)}
 			{#if tip}
-				+ {f(tipFiat, currency)}
+				+ {f(fiat(tip, rate), currency)}
 			{/if}
 		</h2>
 		<h3 class="text-secondary md:text-lg mb-6 mt-1">
-			{sat(pending - tip)}
+			⚡️{s(pending - tip)}
 			{#if tip}
-				+{sat(tip)}
+				<span class="text-lg">
+					+ ⚡️{s(tip)}
+				</span>
 			{/if}
 		</h3>
 	{/if}
diff --git a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
index d033c413..296ef9c6 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
@@ -3,7 +3,7 @@
 	import { browser } from '$app/environment';
 	import { invoice as inv, request } from '$lib/store';
 	import { copy, focus, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
-	import { Icon } from '$comp';
+	import { Icon, Slider } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 	import { enhance } from '$app/forms';
@@ -37,9 +37,6 @@
 			customInput.value = '';
 		}
 		tipPercent = e.target.value;
-
-		clearTimeout(timeout);
-		timeout = setTimeout(update, 800);
 	};
 
 	let submitting;
@@ -56,10 +53,6 @@
 	};
 
 	let submit;
-	let update = async () => {
-		await tick();
-		//submit.click();
-	};
 
 	export let data;
 	$: refresh(data);
@@ -123,16 +116,7 @@
 		{#if !showCustomAmount}
 			<div class="my-2 text-xl">{Math.round(tipPercent)}%</div>
 
-			<input
-				id="slider"
-				type="range"
-				min="0"
-				max="100"
-				value={tipPercent}
-				class="px-0 py-0 my-5"
-				style="--bgPercent: {tipPercent}%;"
-				on:input={handleSlide}
-			/>
+			<Slider handle={handleSlide} bind:value={tipPercent} />
 
 			<div class="flex mb-8 text-lg">
 				<div>
@@ -201,43 +185,6 @@
 </div>
 
 <style>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: linear-gradient(
-			to right,
-			black 0%,
-			black var(--bgPercent),
-			#f5f7fa var(--bgPercent),
-			#f5f7fa 100%
-		);
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
 	.active {
 		@apply !bg-black !text-white;
 	}
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.server.js b/src/routes/(app)/[username]/messages/+page.server.js
index 63116099..7b651389 100644
--- a/src/routes/(app)/[username]/(profile)/messages/+page.server.js
+++ b/src/routes/(app)/[username]/messages/+page.server.js
@@ -7,10 +7,13 @@ export async function load({ params, parent, url }) {
 	let messages = [];
 
 	try {
-		messages = await get(`/nostr/${user.pubkey}/${subject.pubkey}/${since}/messages`);
+		messages = await get(`/${user.pubkey}/${since}/messages`);
+		messages = messages
+			.filter((m) => m.recipient.id === subject.id || m.author.id === subject.id)
+			.sort((a, b) => a.created_at - b.created_at);
 	} catch (e) {
 		console.log(`failed to fetch nostr messages`, e);
 	}
 
-	return { newMessages: messages };
+	return { messages, user };
 }
diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte
new file mode 100644
index 00000000..7a10d605
--- /dev/null
+++ b/src/routes/(app)/[username]/messages/+page.svelte
@@ -0,0 +1,171 @@
+<script>
+	import { cubicInOut } from 'svelte/easing';
+	import { browser } from '$app/environment';
+	import { t } from '$lib/translations';
+	import { format } from 'date-fns';
+	import { scale, fade, fly } from 'svelte/transition';
+	import { enhance } from '$app/forms';
+	import { Avatar, Icon } from '$comp';
+	import { back, fail, focus } from '$lib/utils';
+	import { sign, send, encrypt, decrypt } from '$lib/nostr';
+	import { event as e, password } from '$lib/store';
+	import { tick, onMount } from 'svelte';
+	import { calculateId } from 'nostr';
+
+	export let data;
+
+	function fadeScale(node, { delay = 0, duration = 200, easing = (x) => x, baseScale = 0 }) {
+		const o = +getComputedStyle(node).opacity;
+		const m = getComputedStyle(node).transform.match(/scale\(([0-9.]+)\)/);
+		const s = m ? m[1] : 1;
+		const is = 1 - baseScale;
+
+		return {
+			delay,
+			duration,
+			css: (t) => {
+				const eased = easing(t);
+				return `opacity: ${eased * o}; transform: scale(${eased * s * is + baseScale})`;
+			}
+		};
+	}
+
+	let { messages, subject, user } = data;
+	let input, pane;
+
+	$: initialize($password);
+	let initialize = async (p) => {
+		if (!p) return;
+		await Promise.all(
+			messages.map(async (event) => (event.message = await decrypt({ event, user })))
+		);
+
+		messages = messages;
+		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+	};
+
+	e.subscribe(async (event) => {
+		let found = ~messages.findIndex((m) => m.id === event?.id);
+		if (event?.recipient.id === user.id && !found) {
+			event.message = await decrypt({ event, user });
+			messages.push(event);
+			messages = messages;
+			tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+		}
+	});
+
+	let sent, submitting, message;
+	let submit = async () => {
+		submitting = true;
+
+		let event = {
+			pubkey: user.pubkey,
+			created_at: Math.floor(Date.now() / 1000),
+			kind: 4,
+			tags: [['p', subject.pubkey]]
+		};
+
+		event.message = message;
+
+		message = '';
+
+		event.author = user;
+		event.recipient = subject;
+
+		messages.push(event);
+		messages = messages;
+		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+
+		try {
+			event.id = await calculateId(event);
+			event.content = await encrypt({ message: event.message, recipient: subject.pubkey, user });
+			await sign({ event, user });
+			await send(event);
+
+			sent = true;
+		} catch (e) {
+			console.log(e);
+			fail('Failed to send message');
+		}
+
+		message = '';
+		submitting = false;
+	};
+
+	let keydown = (e) => {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			submit();
+		}
+	};
+</script>
+
+<div class="container max-w-xl mx-auto px-4 space-y-5">
+	<div
+		class="h-[50vh] max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
+		bind:this={pane}
+	>
+		{#each messages as { id, author, message, created_at, pubkey }}
+			{@const ours = pubkey === user.pubkey}
+			{@const theirs = !ours}
+
+			{#if message}
+				<div
+					class="flex gap-2"
+					class:flex-row-reverse={theirs}
+					class:justify-end={theirs}
+					in:fadeScale={{
+						easing: cubicInOut,
+						baseScale: 0.5
+					}}
+				>
+					<div
+						class="rounded-2xl px-4 py-2 max-w-[300px] mb-1 text-lg"
+						class:ours
+						class:theirs
+						:key={id}
+					>
+						{message}
+					</div>
+					<div class="mt-auto">
+						<Avatar user={author} size={'12'} />
+					</div>
+				</div>
+				<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
+					{format(new Date(created_at * 1000), 'MMM d')},
+					{format(new Date(created_at * 1000), 'h:mm aa')}
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<form
+		method="POST"
+		class="w-full border rounded-xl outline-none gap-4 flex p-0 pr-2"
+		on:submit|preventDefault={submit}
+	>
+		<input type="hidden" name="requester_id" value={user.id} />
+		<input type="hidden" name="recipient" value={subject.username} />
+
+		<div
+			use:focus
+			contenteditable
+			class="grow break-all py-4 outline-none mt-0 pl-4"
+			bind:innerHTML={message}
+			on:keydown={keydown}
+		/>
+		<button type="submit" class="my-auto shrink-0">
+			<Icon icon="send" style="w-8" />
+		</button>
+	</form>
+</div>
+
+<style>
+	.ours {
+		@apply bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] text-black rounded-br-none ml-auto;
+	}
+
+	.theirs {
+		@apply bg-gray-100 text-black rounded-bl-none;
+	}
+</style>
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 142be4c4..a502f8c3 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Avatar, Icon } from '$comp';
 	import { onMount } from 'svelte';
-	import { format, parseISO } from 'date-fns';
+	import { format } from 'date-fns';
 	import { newPayment, payments } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { get, f, s, sat, sats } from '$lib/utils';
@@ -180,14 +180,12 @@
 									</div>
 								</a>
 							{:else if p.with}
-								<a href={`/${p.with.username}`}>
-									<div class="flex">
-										<div class="my-auto">
-											<Avatar user={p.with} size={12} />
-										</div>
-										<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+								<div class="flex">
+									<div class="my-auto">
+										<Avatar user={p.with} size={16} disabled={true} />
 									</div>
-								</a>
+									<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+								</div>
 							{:else if p.type === types.classic}
 								<img
 									src="/images/classic.png"
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 99d95be0..95495368 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -46,10 +46,5 @@
 		>
 			{amount ? $t('payments.next') : $t('payments.sendersChoice')}
 		</button>
-
-		<div class="w-full flex justify-center">
-			<span class="font-bold mr-2">{type[0].toUpperCase() + type.substring(1, type.length)}</span>
-			<Toggle id="prompt" checked={lightning} bind:value={lightning} />
-		</div>
 	</div>
 </form>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index 361a9f85..535c588f 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -1,5 +1,5 @@
 import { fail, redirect } from '@sveltejs/kit';
-import { auth, get, post } from '$lib/utils';
+import { fd, auth, get, post } from '$lib/utils';
 
 export function load({ params, url }) {
 	if (url.pathname.endsWith('settings')) throw redirect(307, url.pathname + '/account');
@@ -7,8 +7,9 @@ export function load({ params, url }) {
 }
 
 export const actions = {
-	save: async ({ cookies, request }) => {
-		let form = Object.fromEntries(await request.formData());
+	default: async ({ cookies, request }) => {
+		let form = await fd(request);
+		form.prompt = form.prompt === 'on';
 		let user = { ...(await get('/me', auth(cookies))), ...form };
 
 		try {